<template>
  <!-- 推荐问题scroll -->
  <view class="scroll-container w-full h-6 px-2 box-border overflow-hidden flex flex-row items-center">
    <view id="wrapper" class="scroll-wrapper whitespace-nowrap overflow-hidden">
      <view class="scroll-content inline-flex flex-row flex-nowrap gap-[8px] text-[14px] leading-[20px]">
        <view class="inlin-flex items-center px-1 rounded-sm bg-[#999] text-white">哪些品牌饮用水？</view>
        <view class="inlin-flex items-center px-1 rounded-sm bg-[#999] text-white">哪些品牌饮用水比较好？</view>
        <view class="inlin-flex items-center px-1 rounded-sm bg-[#999] text-white">哪些品牌饮用水比较好？</view>
        <view class="inlin-flex items-center px-1 rounded-sm bg-[#999] text-white">哪些品牌用水比较好？</view>
        <view class="inlin-flex items-center px-1 rounded-sm bg-[#999] text-white">哪些品牌饮用水比较好？</view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import BScroll from 'better-scroll'
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
const bs = ref()
onMounted(() => {
  nextTick(() => {
    initScroll()
  })
})
const initScroll = () => {
  if (process.env.UNI_PLATFORM === 'mp-weixin') {
    const query = uni.createSelectorQuery().in(this)
    query
      .select('.scroll-wrapper')
      .node(res => {
        bs.value = new BScroll(res.node, {
          scrollX: true, // 横向滚动
          scrollY: false, // 禁止纵向滚动
          click: true, // 允许点击
          bounce: true // 边界回弹
        })
      })
      .exec()
  } else {
    const el = document.getElementById('wrapper')
    if (el) {
      bs.value = BScroll(el, {
        scrollX: true, // 横向滚动
        scrollY: false, // 禁止纵向滚动
        click: true, // 允许点击
        bounce: false // 边界回弹
      })
    }
  }
}
onBeforeUnmount(() => {
  if (bs.value) {
    bs.value.destroy()
  }
})
</script>
